<template>
	<view :class="[primarySize()]">
		<view class="container bg-white">
			<image class="z_bg1" src="@/static/public/z_bg1.png" mode="widthFix"></image>
			<view class="page-body">
				<view class="my-rights">
					<view class="title mb40">我的权益</view>
					<view class="flex-box tc">
						<view class="flex-grow-1">
							<view class="num">{{summary.job_num_limit}}</view>
							<view class="key">发布职位</view>
						</view>
						<view class="flex-grow-1">
							<view class="num">{{summary.resume_action_num}}</view>
							<view class="key">查看简历</view>
						</view>
						<view class="flex-grow-1">
							<view class="num">{{summary.interview_num}}</view>
							<view class="key">邀请面试</view>
						</view>
						<view class="flex-grow-1">
							<view class="num">{{summary.job_refresh_num}}</view>
							<view class="key">刷新职位</view>
						</view>
					</view>
				</view>
				<view class="taocan">
					<image class="z_bg2" src="@/static/public/z_bg2.png" mode="widthFix"></image>
					<view class="inner">
						<view class="tab flex-box">
							<view class="flex-grow-1" :class="[tabIdx == 1 ? 'active' : '']" @click="tabClick(1)">套餐列表
							</view>
							<view class="line"></view>
							<view class="flex-grow-1" :class="[tabIdx == 2 ? 'active' : '']" @click="tabClick(2)">购买记录
							</view>
						</view>
						<template v-if="tabIdx == 1">
							<view class="taocan-item" v-for="(item,index) in packageList" @click="choosePackage(index)">
								<view class="flex-box mb40">
									<view class="title flex-grow-1">{{item.name}}</view>
									<view class="price">
										<text class="fs22">¥</text>
										<text class="fs34">{{item.salesprice}}</text>
										<!-- <text class="fs22">/{{item.unit_text}}</text> -->
									</view>
								</view>
								<view class="flex-box tc">
									<view class="flex-grow-1">
										<view class="fs40 mb15">{{item.job_publish_num}}</view>
										<view class="fs24 key">发布职位</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs40 mb15">{{item.resume_view_num}}</view>
										<view class="fs24 key">查看简历</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs40 mb15">{{item.interview_num}}</view>
										<view class="fs24 key">邀请面试</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs40 mb15">{{item.job_refresh_num}}</view>
										<view class="fs24 key">刷新职位</view>
									</view>
								</view>
							</view>
							<view class="mlr30">
								<view class="nothing" v-if="packageListMore.nothing">
									<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
									<text>暂无相关套餐信息</text>
								</view>
								<button @click="fetchPackageList" v-else hover-class="none"
									class="more_btn mt30 mb30">{{packageListMore.text}}</button>
							</view>
						</template>
						<template v-if="tabIdx == 2">
							<view class="taocan-item" v-for="(item,index) in packageOrderList">
								<view class="order-num mb30">订单号 {{item.order_no}}</view>
								<view class="flex-box mb30">
									<view class="title flex-grow-1">{{item.package_name}}</view>
									<view class="order-num">{{formatDatetime(item.paytime,'mm.dd hh:ii')}}</view>
								</view>
								<view class="flex-box tc data mb30">
									<view class="flex-grow-1">
										<view class="fs34 mb15">{{item.job_publish_num}}</view>
										<view class="fs24 key">发布职位</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs34 mb15">{{item.resume_view_num}}</view>
										<view class="fs24 key">查看简历</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs34 mb15">{{item.interview_num}}</view>
										<view class="fs24 key">邀请面试</view>
									</view>
									<view class="flex-grow-1">
										<view class="fs34 mb15">{{item.job_refresh_num}}</view>
										<view class="fs24 key">刷新职位</view>
									</view>
								</view>
								<view class="flex-box mb20">
									<view class="flex-grow-1 col5 fs30">支付方式</view>
									<image class="icon-pay" src="@/static/public/z_icon1.png" mode="aspectFit"></image>
									<view class="fs30">{{item.pay_type_text}}</view>
								</view>
								<view class="flex-box mb20">
									<view class="flex-grow-1 col5 fs30">支付金额</view>
									<view>
										<text class="fs22">¥</text>
										<text class="fs34">{{item.pay_price}}</text>
									</view>
								</view>
								<view class="price tr">
									<text class="fs24 col5">合计</text>
									<text class="fs22">¥</text>
									<text class="fs34">{{item.total_price}}</text>
								</view>
							</view>

							<view class="mlr30">
								<view class="nothing" v-if="packageOrderListMore.nothing">
									<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
									<text>暂无相关订单信息</text>
								</view>
								<button @click="fetchPackageOrderList" v-else hover-class="none"
									class="more_btn mt30 mb30">{{packageOrderListMore.text}}</button>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<view class="zz" v-if="showPop" @click="togglePop"></view>
		<view class="pay-pop" v-if="showPop">
			<view class="fs34 mb30 tc">购买套餐</view>
			<view class="flex-box mb30">
				<view class="flex-grow-1 fs30 col5">套餐名称</view>
				<view class="fs34">{{packageList[packageIndex].name}}</view>
			</view>
			<view class="flex-box mb40">
				<view class="flex-grow-1 fs30 col5">支付金额</view>
				<view class="price">
					<text class="fs22">¥</text>
					<text class="fs34">{{packageList[packageIndex].salesprice}}</text>
				</view>
			</view>
			<view class="flex-box mb30">
				<view class="flex-grow-1 fs30 col5">开票类型</view>
				<view class="flex-box mr60" @click="ticketClick(1)">
					<image class="icon2 mr15" :src="iconPath(ticketType==1?'choose_sc.png':'choose_uc.png')"
						mode="widthFix"></image>
					<view>普票</view>
				</view>
				<view class="flex-box" @click="ticketClick(2)">
					<image class="icon2 mr15" :src="iconPath(ticketType==2?'choose_sc.png':'choose_uc.png')"
						mode="widthFix"></image>
					<view>专票</view>
				</view>
			</view>
			<textarea class="piao-text" @input="ticketInput" placeholder="请输入开票信息~"></textarea>
			<view class="fs36 tc mb40">- 支付方式 -</view>
			<view class="pay-item" @click="payClick(1)">
				<view class="flex-box">
					<image class="icon1" src="@/static/public/z_icon1.png" mode="aspectFit"></image>
					<view class="fs30 flex-grow-1">线上支付</view>
					<image class="icon2" :src="iconPath(payIdx==1?'choose_sc.png':'choose_uc.png')"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="pay-item" @click="payClick(3)">
				<view class="flex-box">
					<image class="icon1" src="@/static/public/z_icon2.png" mode="aspectFit"></image>
					<view class="fs30 flex-grow-1">线下支付</view>
					<image class="icon2" :src="iconPath(payIdx==3?'choose_sc.png':'choose_uc.png')"
						mode="widthFix"></image>
				</view>
				<view class="info-box" v-if="payIdx == 3">
					<view class="fs30 mb30">收款信息 <text style="color:var(--primary)" @click="copy">复制</text></view>
					<view class="flex-box mb40">
						<view class="flex-grow-1">公司名称</view>
						<view>{{config.corporate_company}}</view>
					</view>
					<view class="flex-box mb40">
						<view class="flex-grow-1">开户行</view>
						<view>{{config.open_bank}}</view>
					</view>
					<view class="flex-box">
						<view class="flex-grow-1">开户账号</view>
						<view>{{config.corporate_account}}</view>
					</view>
				</view>
			</view>
			<view class="fs26 col5 mb15">备注</view>
			<textarea class="piao-text" @input="remarksInput" placeholder="请输入备注~" style="height: 200rpx;"></textarea>

			<view class="flex-box">
				<view class="price mr30">
					<text class="fs26 col5">合计</text>
					<text class="fs22">¥</text>
					<text class="fs34">{{packageList[packageIndex].salesprice}}</text>
				</view>
				<view class="btn3 tc flex-grow-1" @click="onsubmit">确认支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				isIos: false,
				summary: {},
				packageList: [],
				packageListMore: {
					page: 1
				},
				packageIndex: 0,
				packageOrderList: [],
				packageOrderListMore: {
					page: 1
				},
				tabIdx: 1,
				showPop: false,
				payIdx: 1,
				ticketType: 1,
				ticket: '',
				remarks: '',
				config:{}
			}
		},
		onLoad: function(options) {
			;
			let page = this;
			this.isIos = app.globalData.isIos;
			page.fetchCompany();
			page.$core.get({
				url: '/xilujob.common/corporate',
				loading: false,
				success(ret, data) {
					page.config = ret.data
				}
			});
			page.fetchPackageList();
			page.fetchPackageOrderList();
		},
		methods: {
			tabClick(i) {
				this.tabIdx = i
			},
			togglePop() {
				this.showPop = !this.showPop
			},
			//开票类型
			ticketClick(i) {
				this.ticketType = i
			},
			//支付类型
			payClick(i) {
				this.payIdx = i
			},
			fetchCompany() {
				let page = this;
				this.$core.get({
					url: '/xilujob.company/company',
					loading: false,
					success(ret, data) {
						page.summary = ret.data.summary
					}
				});
			},
			fetchPackageList() {
				this.$util.fetch(this, 'xilujob.package/lists', {}, 'packageListMore', 'packageList', 'data', list => {

				});
			},

			fetchPackageOrderList() {
				this.$util.fetch(this, 'xilujob.package_order/lists', {}, 'packageOrderListMore', 'packageOrderList', 'data',
					list => {

					});
			},

			choosePackage(i) {
				let packageIndex = i;
				this.packageIndex = packageIndex
				this.showPop = !this.showPop
			},
			//发票
			ticketInput(e) {
				this.ticket = e.detail.value.trim()
			},
			//备注
			remarksInput(e) {
				this.remarks = e.detail.value.trim()
			},

			/**
			 * 套餐购买
			 */
			onsubmit() {
				let packageIndex = this.packageIndex;
				let packageList = this.packageList;
				let package_id = packageList[packageIndex].id;
				let config = this.config;
				let ticket_type = this.ticketType;
				let ticket = this.ticket;
				let pay_type = this.payIdx;
				let remarks = this.remarks;
				let data = {
					package_id: package_id,
					ticket_type: ticket_type,
					ticket: ticket,
					pay_type: pay_type,
					corporate_company: config.corporate_company,
					open_bank: config.open_bank,
					corporate_account: config.corporate_account,
					remarks: remarks
				}
				let page = this;
				if (pay_type == 1) {
					uni.login({
						success(wxRes) {
							let code = wxRes.code;
							page.$core.post({
								url: '/xilujob.user/wxlogin',
								data: {
									code: code
								},
								success: (ret, response) => {
									data['third_id'] = ret.data.third.third_id;
									page.createOrder(data);
								},
								fail: (ret, response) => {
									uni.showToast({
										title: '下单失败',
										icon: 'none'
									})
								}
							});
						},
					});
				} else {
					page.createOrder(data);
				}
			},

			createOrder(data) {
				let page = this;
				this.$core.post({
					url: '/xilujob.package/order',
					data: data,
					loading: true,
					success(ret, data2) {
						if (ret.data.pay_type == 3) {
							uni.showModal({
								title: '提示',
								content: "订单已创建成功,请尽快线下打款~",
								success() {
									setTimeout(function() {
										uni.redirectTo({
											url: '/pages/company/order_detail?order_id=' +
												ret.data.id,
										})
									}, 1500)
								}
							})
						} else {
							page.payment(ret.data, data.third_id)
						}

					}
				});
			},

			payment(order, third_id) {
				let page = this;
				this.$core.post({
					url: '/xilujob.pay/pay',
					data: {
						order_id: order.id,
						platform: order.platform,
						pay_type: order.pay_type,
						third_id: third_id
					},
					loading: true,
					success(ret, data) {
						if (order.pay_type == 1) {
							//发起支付
							uni.requestPayment({
								'timeStamp': ret.data.timeStamp,
								'nonceStr': ret.data.nonceStr,
								'package': ret.data.package,
								'signType': ret.data.signType,
								'paySign': ret.data.paySign,
								'success': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付成功',
									});
									page.togglePop();
									page.fetchCompany();
								},
								'fail': function(res) {
									uni.showToast({
										icon: "none",
										title: '支付失败',
									})
								},
								'complete': function(res) {

								}
							});
						} else {
							uni.showToast({
								title: ret.msg,
								icon: 'none'
							})
						}
					}
				});
			},

			//复制
			copy() {
				let config = this.config;
				let data = config.corporate_company + ' ' + config.open_bank + ' ' + config.corporate_account
				uni.setClipboardData({
					data: data,
					success(res) {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.z_bg1 {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		width: 750rpx;
	}

	.page-body {
		position: relative;
	}

	.my-rights {
		margin: 40rpx 40rpx 0;
		padding: 30rpx;
		width: 670rpx;
		height: 310rpx;
		background: linear-gradient(90deg, #FFF1E8 0%, #F3CCB2 100%);
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.my-rights .title {
		font-size: 34rpx;
		font-weight: bold;
		color: #765454;
		line-height: 36rpx;
	}

	.my-rights .num {
		margin: 0 0 16rpx;
		font-size: 40rpx;
		color: #765454;
		line-height: 42rpx;
	}

	.my-rights .key {
		font-size: 24rpx;
		color: #9F7A7A;
		line-height: 26rpx;
	}

	.taocan {
		position: relative;
		margin-top: -130rpx;
	}

	.taocan .z_bg2 {
		display: block;
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.taocan .inner {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		padding: 100rpx 30rpx 30rpx;
	}

	.taocan .tab {
		padding: 0 0 30rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.taocan .tab .active {
		font-size: 36rpx;
		color: #101010;
	}

	.taocan .line {
		width: 2rpx;
		height: 32rpx;
		background: #CCCCCC;
	}

	.taocan-item {
		margin: 0 0 30rpx;
		padding: 30rpx 30rpx 40rpx;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
		background: #FFF;
	}

	.taocan-item .title {
		font-size: 34rpx;
		font-weight: 500;
		color: #101010;
		line-height: 36rpx;
	}

	.taocan-item .price {
		color: #FE3846;
	}

	.taocan-item .key {
		color: #898989;
	}

	.taocan-item .order-num {
		font-size: 28rpx;
		color: #555555;
		line-height: 30rpx;
	}

	.taocan-item .data {
		width: 630rpx;
		height: 150rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}

	.taocan-item .icon-pay {
		margin: 0 10rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}



.zz{position: fixed;left: 0;top: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.6);z-index: 100;}

	.pay-pop {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 40rpx 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 5rpx 5rpx;
		z-index: 101;
		box-sizing: border-box;
		overflow-y: scroll;
		max-height: 80vh;
	}

	.pay-pop .price {
		color: #FF7102;
	}

	.pay-pop .pay-item {
		margin: 0 0 30rpx;
		padding: 36rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0 4rpx 20rpx 0 rgba(183, 189, 202, 0.2);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
	}

	.pay-pop .icon1 {
		margin: 0 15rpx 0 0;
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.pay-pop .icon2 {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.pay-pop .btn3 {
		border-radius: 8rpx;
	}

	.pay-pop .info-box {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #F7F9FC;
		border-radius: 10rpx;
	}

	.pay-pop .piao-text {
		padding: 30rpx;
		margin: 0 0 30rpx;
		width: 100%;
		height: 300rpx;
		background: rgb(247, 249, 252);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}
	.mr60{margin-right: 60rpx;}
</style>